<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>历史天气大屏</title>
    <link rel="stylesheet" href="../static/static/css/index.css">
    <link rel="stylesheet" href="../static/static/css/icomoon.css">
</head>

<body>
<div class="viewport">
    <div class="column">
        <!--概览-->
        <div class="overview panel">
            <div class="inner">
                <div class="time-filter">

                    <div class="filter-items">
                        <label for="startDate"
                               style="color: white ; font-size: 15px; margin-right: 20px">日期选择:</label>
                        <input type="date" id="startDate" name="startDate"
                                value="{{ default_date }}" style="margin-right: 20px;width: 150px;height: 20px">
                        <button onclick="filterData()" style="width: 60px ; padding-left: 20px">筛选</button>
                        
                        <button id="homeBtn" style="position: fixed; top: 45px; right: 70px; z-index: 1000; background: none; border: none; cursor: pointer;">
                            <a href="#">
                                <img src="../static/static/weathericon/首页.png" style="width: 15px; height: 15px;">
                            </a>
                        </button>
                        <button id="fullscreenBtn" style="position: fixed; top: 38px; right: 20px; z-index: 1000; background: none; border: none; cursor: pointer;">
    <img src="../static/static/weathericon/全屏.png" alt="全屏" style="width: 18px; height: 18px;">
</button>
                    </div>
                </div>

            </div>
        </div>
        <!--监控-->
        <div class="monitor panel">
            <div class="inner">
                <div class="tabs">
                    <a href="#" data-index="0" class="active">城市天气</a>

                </div>
                <div class="content" style="display: block;">
                    <div class="head">
                        <span class="col">时间</span>
                        <span class="col" style="width: 3.4rem">城市名称</span>
                        <span class="col">天气状况</span>
                        <span class="col">风力等级</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            {#                                轮播表#}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--点位-->
        <div class="point panel">
            <div class="inner">

                <h3>风力等级统计</h3>
                <div class="chart">
                    <div class="pi" style="width: 13rem;
  height: 10rem;
  margin-left: -0.4rem;">
                        <div id="windChart" style="width: 300px; height: 200px;"></div>
                    </div>

                    <div class="data">
                        <div class="item">
                            <h4 id="windyCount">0</h4>
                            <span>刮风城市数量</span>
                        </div>
                        <div class="item">
                            <h4 id="nonWindyCount">0</h4>
                            <span>无风城市数量</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="column">
        <!-- 地图 -->
        <div class="map">
            <h3>
                <span class="icon-cube"></span>
                气温地图
            </h3>

            <div class="mapContainer">
                {#                    气温地图绘制处#}
                <div id="container" style="width: 100%; height: 400px;">

                </div>
            </div>
        </div>
        <!-- 一线城市最高温柱状图 -->
        <div class="monitor panel" style="height: 14.167rem">
            <div class="inner">
                <div class="tabs">
                    <a href="javascript:;" data-index="0" class="active">一线城市最高温</a>
                    <a href="javascript:;" data-index="1" class="active">一线城市最低温</a>
                </div>
                <div class="chart">
                    <div class="bar" id="maxTempChart" style="width: 28.5rem;
  height: 13rem;"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="column">
        <!-- 订单 -->
        <div class="order panel">
            <div class="inner">
                <!-- 筛选 -->

                <!-- 数据 -->
                <div class="data">
                    <div class="item">
                        <h4 id="cityCount">0</h4>
                        <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                城市数量
                            </span>
                    </div>
                    <div class="item">
                        <h4 id="maxTempCity">-</h4>
                        <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                最高温城市
                            </span>
                    </div>
                    <div class="item">
                        <h4 id="minTempCity">-</h4>
                        <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                最低温城市
                            </span>
                    </div>

                </div>
            </div>
        </div>
        <!-- 销售额 -->
        <div class="sales panel">
            <div class="inner">
                <div class="caption">
                    <h3>天气状况与温度关系</h3>

                </div>
                <div class="chart">

                    <div class="line" id="weatherTempRelationChart" style="width: 20.5rem; height: 8rem;"></div>
                </div>
            </div>
        </div>
        <!-- 渠道 季度 -->
        <div class="wrap">
            <div class="channel panel">
                <div class="inner">
                    <h3>天气状况分布</h3>
                    <div class="data">
                        <div class="item">
                            <h4 id="sunny"><small>%</small></h4>
                            <span>
                                    <i class="icon-plane"></i>
                                    晴天
                                </span>
                        </div>
                        <div class="item">
                            <h4 id="cloudy"><small>%</small></h4>
                            <span>
                                    <i class="icon-bag"></i>
                                    阴天
                                </span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="item">
                            <h4 id="rainy"><small>%</small></h4>
                            <span>
                                    <i class="icon-train"></i>
                                    雨天
                                </span>
                        </div>
                        <div class="item">
                            <h4 id="snow"><small>%</small></h4>
                            <span>
                                    <i class="icon-bus"></i>
                                    雪天
                                </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="quarter panel">
                <div class="inner">
                    <h3>风向统计</h3>
                    <div class="chart" style="flex: 1;
  padding-top: 0rem;">
                        <div id="windDirectionChart" style="width: 150px; height: 150px;"></div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 排行榜 -->
        <div class="top panel">
            <div class="inner" style="height: 60px">
                <div class="all" style="width: 20rem;height: 25px; display: flex;flex-direction: row;">
                    <h3 style="display: inline; width: 150px;">城市温度变化</h3>
                    <label for="" class="col-sm-1 col-form-label"
                           style="width: 100px; margin-left: 10px;font-size: 15px;color: white">城市选择:</label>
                    <div class="col-sm-11" style="width: 5rem; margin-left: 10px;">
                        <input
                                list="cityList"
                                class="form-control"
                                style="width: 5rem; margin-right: 20px"
                                id="cityInput"
                                placeholder="请输入或选择城市"
                                oninput="change()"
                                value="{{ default_city }}"
                        >
                        <datalist id="cityList">
                            {% for city in cityList %}
                                <option value="{{ city }}">{{ city }}</option>
                            {% endfor %}
                        </datalist>
                    </div>

                    <i class="date"
                       style=" margin-left: 20px; display: inline; width: 7rem; color: #36be90;font-size: 10px">// 过去30日
                        //</i>

                </div>

            </div>
            {#        折线图绘制处#}
            <div id="temperatureTrendChart" class="inners" style="height: 150px;position: absolute;top: 0rem;right: -1.583rem;
    bottom: -0.875rem;left: -5.5rem;padding: 1rem 1.5rem;">
                {#                在这个div中绘制折线图#}
            </div>
        </div>
    </div>
</div>
</body>
<script src="../static/static/screenjs/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="../static/static/screenjs/index.js"></script>

<script src="../static/static/screenjs/china.js"></script>
<script src="../static/static/screenjs/mymap.js"></script>
<script>
     // 在页面加载时自动触发筛选逻辑
    window.onload = function () {
        // 获取默认日期和城市
        const defaultDate = document.getElementById('startDate').value;
        const defaultCity = document.getElementById('cityInput').value;

        // 调用筛选函数
        filterData(defaultDate, defaultCity);
        //在页面加载时检查 URL 参数，然后动态设置首页按钮的链接
        //给首页按钮添加 id：给首页按钮添加了 id="homeBtn"，以便在 JavaScript 中获取该元素。
{#在 window.onload 中检查 URL 参数：使用 URLSearchParams 来获取 URL 中的参数，判断用户是否为管理员。#}
{#动态设置首页按钮的链接：根据用户角色，动态设置首页按钮的链接。如果是管理员，链接到 http://localhost:8081/#/home；如果是普通用户，链接到 /userApp/index。#}
         // 检查 URL 参数
        const urlParams = new URLSearchParams(window.location.search);
        const isManager = urlParams.get('manager') === 'true';
        const homeBtn = document.getElementById('homeBtn');
        const homeLink = homeBtn.querySelector('a');

        if (isManager) {
            homeLink.href = 'http://localhost:8081/#/home';
        } else {
            homeLink.href = '/userApp/index';
        }
        
    };

    // 添加筛选数据的函数
    function filterData(selectedDate = null, selectedCity = null) {
        {#const selectedDate = document.getElementById('startDate').value;#}
        {#const selectedCity = document.getElementById('cityInput').value;#}
        if (!selectedDate) {
            selectedDate = document.getElementById('startDate').value;
        }
        if (!selectedCity) {
            selectedCity = document.getElementById('cityInput').value;
        }


        $.ajax({
            url: '/userApp/screendata/',
            type: 'POST',
            data: {selectedDate: selectedDate, selectedCity: selectedCity },
            dataType: 'json',
            success: function (data) {
                // 确保 data 中包含 weather_data 数组
                const weatherData = data.weather_data || [];
                const maxTempData = data.max_temp_data || [];
                const cityCount = data.city_count || 0;
                const maxTempCity = data.max_temp_city || '-';
                const minTempCity = data.min_temp_city || '-';

                // 清空轮播表内容
                const marquee = document.querySelector('.marquee');
                marquee.innerHTML = '';

                // 遍历数据并填充轮播表
                weatherData.forEach((item) => {
                    const row = document.createElement('div');
                    row.className = 'row';

                    const dateCol = document.createElement('div');
                    dateCol.className = 'col';
                    dateCol.textContent = item.date;

                    const cityCol = document.createElement('div');
                    cityCol.className = 'col';
                    cityCol.textContent = item.city;

                    const weatherCol = document.createElement('div');
                    weatherCol.className = 'col';
                    weatherCol.textContent = item.weather;

                    const levelCol = document.createElement('div');
                    levelCol.className = 'col';
                    levelCol.textContent = item.level;

                    row.appendChild(dateCol);
                    row.appendChild(cityCol);
                    row.appendChild(weatherCol);
                    row.appendChild(levelCol);

                    marquee.appendChild(row);
                });
                const rowCount = weatherData.length;
                const duration = rowCount * 0.3; // 每条数据停留5秒
                document.querySelector('.marquee').style.animationDuration = `${duration}s`;
                // 更新统计信息
                document.getElementById('cityCount').textContent = cityCount;
                document.getElementById('maxTempCity').textContent = maxTempCity;
                document.getElementById('minTempCity').textContent = minTempCity;

                // 统计风力等级和城市数量
                const windLevels = {};
                let windyCount = 0;
                let nonWindyCount = 0;

                weatherData.forEach((item) => {
                    const level = item.level;
                    console.log(level)

                    // 统计风力等级
                    if (windLevels[level]) {
                        windLevels[level]++;
                    } else {
                        windLevels[level] = 1;
                    }

                    // 统计刮风和无风城市数量
                    if (level !== '0级') {
                        windyCount++;
                    } else {
                        nonWindyCount++;
                    }
                });

                // 更新风力等级统计图表
                const windChart = echarts.init(document.getElementById('windChart'));
                windChart.setOption({
                    color: ['#1D9DFF', '#32C5E9', '#9FE6B8', '#FF9F7F', '#006CFF'], // 设置饼状图颜色
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '风力等级',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: Object.entries(windLevels).map(([name, value]) => ({value, name})),
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });

                // 更新刮风和无风城市数量
                document.getElementById('windyCount').textContent = windyCount;
                document.getElementById('nonWindyCount').textContent = nonWindyCount;
                // 渲染最高温最低温柱状图
                renderTemperatureChart(maxTempData);
                renderWeatherTempRelationChart(data);
                // 渲染天气占比
                renderWeatherDistribution(data);
                // 渲染风向统计半环形图
                renderWindDirectionChart(data);
                renderTemperatureMap(data);
                
                //折线图绘制
                 renderTemperatureTrendChart(data.past_30_days_dates, data.past_30_days_temps,data.past_30_days_mintemps,selectedCity);
                
            },
            error: function (error) {
                console.error('Error:', error);
                alert('请求失败，请重试');
            }
        });
    }

    // 渲染最高温最低温柱状图
    function renderTemperatureChart(data) {
        const cities = data.map(item => item.city);
        const maxTemps = data.map(item => item.maxtemp);
        const minTemps = data.map(item => item.mintemp);

        const temperatureChart = echarts.init(document.getElementById('maxTempChart'));
        temperatureChart.setOption({

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['最高温', '最低温'],
                orient: 'vertical',
                right: '0%',
                top: '3%',
                itemGap: 20, // 图例项之间的间距
                textStyle: {
                    color: ['#0069D0', '#00F9F9'] // 设置图例文字颜色
                }
            },
            grid: {
                top: '4%' // 设置柱状图距离顶部5%的位置
            },
            xAxis: {
                type: 'category',
                data: cities,
                axisLabel: {
                    interval: 0,

                    textStyle: {
                        color: '#4181D6'
                    }
                }
            },
            yAxis: {
                type: 'value',

                color: '#fff',
                axisLabel: {
                    textStyle: {
                        color: '#4181D6'
                    }
                },

                // 设置刻度线颜色
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#0B546A' // 设置 Y 轴刻度线颜色
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0B546A' // 设置 Y 轴网格线颜色
                    }
                }

            },
            series: [
                {
                    name: '最高温',
                    type: 'bar',
                    data: maxTemps,
                    barWidth: '30%',
                    itemStyle: {
                        color: '#0069D0' // 设置最高温的颜色
                    }
                },
                {
                    name: '最低温',
                    type: 'bar',
                    data: minTemps,
                    barWidth: '30%',
                    itemStyle: {
                        color: '#00F9F9' // 设置最低温的颜色
                    }
                }
            ]
        });
    }

    // 渲染天气状况与温度关系的散点图
    function renderWeatherTempRelationChart(data) {
        const weatherTempRelation = data.weather_temp_relation;

        // 提取数据
        const weatherTypes = Object.keys(weatherTempRelation);
        const seriesData = [];
        const colors = ['#1D9DFF', '#32C5E9', '#9FE6B8', '#FF9F7F', '#006CFF'];

        weatherTypes.forEach((weather, index) => {
            const temperatures = weatherTempRelation[weather];
            const scatterData = temperatures.map(temp => [index, temp]); // X轴为天气类型索引，Y轴为温度
            seriesData.push({
                name: weather,
                type: 'scatter',
                data: scatterData,
                symbolSize: 5,
                itemStyle: {
                    color: colors[index % colors.length]
                },
                label: { // 调整 label 的显示逻辑
                    show: false, // 默认不显示标签
                    position: 'top',
                    formatter: '{c}°C',
                    color: '#fff' // 标签文字颜色
                },
                emphasis: { // 鼠标悬停时的强调状态
                    label: {
                        show: true, // 鼠标悬停时显示标签
                        position: 'top',
                        formatter: '{c}°C',
                        color: '#fff' // 标签文字颜色
                    }
                }
            });
        });

        const chart = echarts.init(document.getElementById('weatherTempRelationChart'));
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: weatherTypes,
                orient: 'horizontal',
                left: 'center',
                top: 'top',
                textStyle: {
                    color: ['#1D9DFF', '#32C5E9', '#9FE6B8', '#FF9F7F', '#006CFF'] // 设置图例文字颜色
                }
            },
            grid: {
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: weatherTypes,
                name: '天气状况',
                nameLocation: 'end',
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#4181D6'
                    }
                }

            },
            yAxis: {
                type: 'value',
                name: '温度(°C)',
                axisLabel: {
                    textStyle: {
                        color: '#4181D6'
                    }
                },

                // 设置刻度线颜色
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#0B546A' // 设置 Y 轴刻度线颜色
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0B546A' // 设置 Y 轴网格线颜色
                    }
                }
            },
            series: seriesData
        });
    }

    function renderWeatherDistribution(data) {
        const weatherDistribution = data.weather_distribution;

        // 获取各个天气类型的占比数据
        const sunny = weatherDistribution['晴'] || 0;
        const cloudy = weatherDistribution['阴'] || 0;
        const rainy = weatherDistribution['小雨'] || 0;
        const snow = weatherDistribution['小雪'] || 0;

        // 更新 HTML 元素
        document.getElementById('sunny').textContent = Math.round(sunny) + '%';
        document.getElementById('cloudy').textContent = Math.round(cloudy) + '%';
        document.getElementById('rainy').textContent = Math.round(rainy) + '%';
        document.getElementById('snow').textContent = Math.round(snow) + '%';
    }

    function renderWindDirectionChart(data) {
        const windDistribution = data.wind_distribution;

        // 创建一个 ECharts 实例
        const windDirectionChart = echarts.init(document.getElementById('windDirectionChart'));

        // 配置半环形图
        const option = {
            color: ['#1D9DFF', '#32C5E9', '#9FE6B8', '#FF9F7F', '#006CFF'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            grid: {
                top: '2%' // 设置柱状图距离顶部5%的位置
            },
            series: [
                {
                    name: '风向',
                    type: 'pie',
                    radius: ['40%', '70%'], // 设置内半径和外半径
                    center: ['50%', '50%'], // 设置饼图中心点
                    startAngle: 180, // 设置起始角度
                    endAngle: 360, // 设置结束角度
                    label: {
                        show: true,
                        position: 'inner',
                        formatter: '{b}'
                    },
                    data: [
                        {value: windDistribution['东北风'] || 0, name: '东北风'},
                        {value: windDistribution['西北风'] || 0, name: '西北风'},
                        {value: windDistribution['东南风'] || 0, name: '东南风'},
                        {value: windDistribution['西南风'] || 0, name: '西南风'},
                        {value: windDistribution['其他'] || 0, name: '其他'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        windDirectionChart.setOption(option);
    }

    function renderTemperatureMap(data) {
        const mapData = data.map_data;

        // 创建一个 ECharts 实例
        const temperatureMap = echarts.init(document.getElementById('container'));

        // 配置地图
        const option = {

            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>最高温: {c}°C'
            },
            grid: {
                top: '3%', // 设置地图距离顶端 5%
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            visualMap: {
                min: -20,
                max: 40,
                left: 'left',
                top: 'bottom',
                text: ['高温', '低温'],
                calculable: true,
                {#1F3B79#}
                color: ['#1F3B79', '#00F0F7'],
                textStyle: {
                    color: '#00F9F9' // 设置 text 的颜色
                }
            },
            series: [

                {
                    name: '最高温',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                        show: true,
                        color: '#fff' // 设置省份名称的字体颜色为 #9CC75A
                    },
                    data: Object.entries(mapData).map(([province, temperature]) => ({
                        name: province,
                        value: temperature
                    }))
                },

            ]
        };

        // 使用刚指定的配置项和数据显示地图
        temperatureMap.setOption(option);
    }
    
    function renderTemperatureTrendChart(dates, temps,mintemps,selectedCity) {
    const temperatureTrendChart = echarts.init(document.getElementById('temperatureTrendChart'));

    const option = {
        title: {
            text: selectedCity+'温度变化趋势',
            left: '30%',
             textStyle: {
                color: 'white', // 设置标题文本颜色
                fontSize: 16,     // 设置标题字体大小
                fontWeight: 'normal' // 设置标题字体粗细
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>最高温: {c}°C'
        },
        grid: {
            top: '17%',
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: {
                interval: 0,
                rotate: 45,
                textStyle: {
                    color: '#4181D6'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '温度(°C)',
            axisLabel: {
                textStyle: {
                    color: '#4181D6'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#0B546A'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0B546A'
                }
            }
        },
        series: [
            {
                name: '最高温',
                type: 'line',
                data: temps,
                itemStyle: {
                    color: '#0069D0'
                },
                lineStyle: {
                    color: '#0069D0'
                }
            },
            {
                name: '最低温',
                type: 'line',
                data: mintemps,
                itemStyle: {
                    color: '#ED3F35'
                },
                lineStyle: {
                    color: '#FA4B46'
                }
            }
        ]
    };

    temperatureTrendChart.setOption(option);
}
document.getElementById('fullscreenBtn').addEventListener('click', function () {
    const element = document.documentElement; // 获取整个页面的根元素
    if (!document.fullscreenElement) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable full-screen mode: ${err.message}`);
        });
    } else {
        document.exitFullscreen();
    }
});
</script>
<style>
    /* 添加轮播表样式 */

    .marquee {
        display: flex;
        flex-direction: column;
        padding: 10px;
    {#border: 1px solid #ccc;#} border-radius: 5px;
        background-color: #101129;
        animation: scroll 580s linear infinite; /* 调整动画持续时间 */
    }

    .marquee .row {
        display: flex;
        align-items: center;
        padding: 5px 0;
    {#border-bottom: 1px solid #eee;#}
    }

    .marquee .row:last-child {
        border-bottom: none;
    }

    .marquee .col {
        flex: 1;
        padding: 0 10px;
        text-align: center;
    }
    /* 全屏样式 */
        :root {
            --full-screen-background-color: #101129;
        }

        #fullscreenBtn {
            background-color: #36be90;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        #fullscreenBtn:hover {
            background-color: #2c8c70;
        }

        @media (orientation: landscape) {
            body[fullscreen] {
                background-color: var(--full-screen-background-color);
            }
        }

</style>
</html>